<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>文件上传下载demo</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="" />
    <style>
      button {
        display: inline-block;
        outline: none;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        font: 14px/100% Arial, Helvetica, sans-serif;
        padding: 5px 2px 4px;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        color: #f5f5f5;
        border: solid 1px #0076a3;
        background: #0095cd;
        background: -webkit-gradient(
          linear,
          left top,
          left bottom,
          from(#0095cc),
          to(#00678e)
        );
        background: -moz-linear-gradient(top, #00adee, #00678e);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#00678e');
      }
      button:hover {
        background: #007ead;
        background: -webkit-gradient(
          linear,
          left top,
          left bottom,
          from(#00678e),
          to(#0095cc)
        );
        background: -moz-linear-gradient(top, #00678e, #0095cc);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00678e', endColorstr='#0095cc');
      }
      .flexBox {
        margin-top: 200px;
        display: flex;
        justify-content: space-around;
      }
    </style>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
  </head>
  <body>
    <div class="flexBox">
      <button id="upload" onclick="easyUpload(false)">点击上传</button>
      <button id="uploadFilebox" onclick="easyUpload(true)">
        点击上传文件夹
      </button>
      <button><a download  onclick="easyDownload('/upload/2022/2/25/1440e657d3548aeef2dfb8651a97043f/files/view.jpeg')">下载按钮</a></button>
      <a  download="filename" href="http://192.168.6.168:8889/file-service/affix/folder/download?filePath=/upload/2022/2/25/28f85c2b6203dcc123cb590764748720/files/第一层.zip"> 定死下载</a>
    </div>
    <!-- 下载树状图系列 -->
    <div id="downloadBox">

    </div>
  </body>
  <script>


 var responseData ={
    "code": 200,
    "msg": "上传成功",
    "data": {
        "name": "28f85c2b6203dcc123cb590764748720",
        "path": "/upload/2022/2/25/28f85c2b6203dcc123cb590764748720/",
        "fileList": null,
        "folderList": [
            {
                "name": "files",
                "path": "/upload/2022/2/25/28f85c2b6203dcc123cb590764748720/files",
                "fileList": [
                    {
                        "name": ".DS_Store",
                        "path": "/upload/2022/2/25/28f85c2b6203dcc123cb590764748720/files/.DS_Store",
                        "ext": "DS_Store",
                        "fileSize": 6148
                    },
                    {
                        "name": "view.jpeg",
                        "path": "/upload/2022/2/25/28f85c2b6203dcc123cb590764748720/files/view.jpeg",
                        "ext": "jpeg",
                        "fileSize": 243987
                    }
                ],
                "folderList": [
                    {
                        "name": "第一层",
                        "path": "/upload/2022/2/25/28f85c2b6203dcc123cb590764748720/files/第一层",
                        "fileList": [
                            {
                                "name": ".DS_Store",
                                "path": "/upload/2022/2/25/28f85c2b6203dcc123cb590764748720/files/第一层/.DS_Store",
                                "ext": "DS_Store",
                                "fileSize": 6148
                            },
                            {
                                "name": "202102250735428549 (1).xlsx",
                                "path": "/upload/2022/2/25/28f85c2b6203dcc123cb590764748720/files/第一层/202102250735428549 (1).xlsx",
                                "ext": "xlsx",
                                "fileSize": 38295
                            }
                        ],
                        "folderList": [
                            {
                                "name": "第二层",
                                "path": "/upload/2022/2/25/28f85c2b6203dcc123cb590764748720/files/第一层/第二层",
                                "fileList": [
                                    {
                                        "name": "shanghai.jpeg",
                                        "path": "/upload/2022/2/25/28f85c2b6203dcc123cb590764748720/files/第一层/第二层/shanghai.jpeg",
                                        "ext": "jpeg",
                                        "fileSize": 153145
                                    }
                                ],
                                "folderList": null
                            }
                        ]
                    }
                ]
            }
        ]
    }
};
    // $(document).ready(function(){

      var resultObj;
      var base_url = "http://192.168.6.168:8889/";
    //  文件上传
    function easyUpload(webkitdirectory) {
      var input = document.createElement("input");
      input.type = "file";
      input.multiple = true; // 支持多选
      input.webkitdirectory = webkitdirectory; // 文件夹上传
      input.click();
      input.onchange = function () {
        var form = new FormData();
        var files = input.files;
        console.log(files);
        //文件夹名称
        if (input.webkitdirectory) {
          var relativePath = files[0].webkitRelativePath;
          var folderName = relativePath.split("/")[0];
          console.log(relativePath, folderName);
        }
        
        for(var i = 0; i< files.length ;i++){
          form.append("files", files[i], files[i].webkitRelativePath); //第一个参数是后台读取的请求key值
        }
       

        // console.log(form.getAll("files"))
        // form.append("token", "你的token");
        var xhr = new XMLHttpRequest();
         // var actionUpload = base_url + "file-service/affix/folder/upload"; //上传服务的接口地址
           var actionUpload = "http://192.168.2.31:10001/fast-file-service/affix/simple/upload";
        // var action = "http:127.0.0.1:3000/upload"
        xhr.open("POST", actionUpload);
        xhr.send(form); //发送表单数据
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4 && xhr.status == 200) {
            var data = JSON.parse(xhr.responseText);
            if(data.code == 200){
              resultObj = data.data;
            }
          
          }
        };
       };
    }




    
    //  文件下载

   
   // 固定表头，根据后端数据递归形成树形结构 
  //  var fixedUrl ="http://192.168.6.168:8889/file-service/affix/folder/download?filePath=";

   var fixedUrl ="http://192.168.3.15:8889/affix/simple/upload";
   function generateTree(treeData){     
     var html= '';
     function loop(treeData){
        // 目录自身
        var dirSelf =  `<ul><li><a href="${fixedUrl + treeData.path + '.zip'}">${treeData.name}</a></li>`;
           html = html + dirSelf ;
        // 生成同级别的文件列表
        var  fileList = treeData.fileList;
        if(fileList){         
          fileList.forEach(file=>{
             html += `<li><a href="${fixedUrl + file.path}">${file.name}</a></li>`
          });
        }       
        // 子目录
        var subDirArr = treeData.folderList;
        if(subDirArr && subDirArr.length){
          for(var i = 0 ;i< subDirArr.length; i++){
            loop(subDirArr[i])
          } 
        }
        html +="</ul>";
     }
     loop(treeData);
     return html;

   }
  
   $("#downloadBox").html(generateTree(responseData.data))
   console.log( generateTree(responseData.data)) 


    //  });
  
  
  
  </script>
</html>
